<template>
	<view class="home">
		<nav-bar></nav-bar>
		<tab-bar @tabChange="changeTabPage" :labelList="labelList"></tab-bar>
		<scroll-list>
			<view>
				<text>hello</text>
				<text>world</text>
				<view style="height: 200px; width: 200px;background-color: tomato;">
					
				</view>
			</view>
		</scroll-list>
	</view>
	</view>

</template>

<script>
	import navBar from '../../components/NavBar/NavBar.vue'
	import tabBar from '../../components/tabBar/tabBar.vue'
	import scrollList from '../../components/scroll-list/scroll-list.vue'
	export default {
		data() {
			return {
				labelList: []
			}
		},
		components: {
			navBar,
			tabBar,
			scrollList
		},
		onLoad() {
			this.getLabelList()
		},
		methods: {
			getLabelList() {
				this.$api.getTabLabel().then((value) => {
					const {
						data: res
					} = value
					this.labelList = res
				})
			},
			changeTabPage(data) {
				console.log(data)
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.home {
		height: 100%;
		display: flex;
		flex-direction: column; 
		border: 1px solid $lws-base-color;
		box-sizing: border-box;
	}

</style>
